[%
# Page status.html;
IF ajaxRequest;
	'<pre>';
	PROCESS ajaxRequest.txt page = 'status';
	'</pre>';
ELSIF multiControl;
	PROCESS multicontrol.html;
ELSIF playbackControl;
	PROCESS playbackctrl.html;
ELSE;
pagetitle = BLOCK;
	playermodel | string; ' : '; "PLAYING" | string;
END;
pageicon = 'MUSIC';
setup    = '1';
music    = '0';
playlist = '0';
status   = '1';
pageStyle = "style = 'background-color: black; color: white; -webkit-text-size-adjust:none;'";
pageHeaderScripts = PROCESS StatusHeader;
PROCESS iHeaderVert.html thispage = 'status' noShowBar = 1;
'<!-- status.html -->';

BLOCK StatusHeader -%]
	<script type="text/javascript">[% PROCESS html/vars.js %]</script>
	<script src="[% webroot %]html/prototype1.js?r=[% revision %]" type = 'text/javascript' defer></script>
	<script src="[% webroot %]html/prototype2.js?r=[% revision %]" type = 'text/javascript' defer></script>
	<script src="[% webroot %]html/prototype3.js?r=[% revision %]" type = 'text/javascript' defer></script>
	<script src="[% webroot %]html/prototype4.js?r=[% revision %]" type = 'text/javascript' defer></script>
	<script src="[% webroot %]html/prototype5.js?r=[% revision %]" type = 'text/javascript' defer></script>
	<script src="[% webroot %]html/global.js?r=[% revision %]" type = 'application/x-javascript' defer></script>
	<!--script src="[% webroot %]html/skin_global.js?r=[% revision %]" type = 'application/x-javascript' defer></script-->
	<script>
		var remotestreaming = "[% "REMOTE_STREAMING" | string %]";
		var srstrings = { shuffle : [	"[% "SHUFFLE_OFF" | string %]",
										"[% "SHUFFLE_ON_SONGS" | string %]",
										"[% "SHUFFLE_ON_ALBUMS" | string %]" ],
						repeat : [	"[% "REPEAT_OFF" | string %]",
									"[% "REPEAT_ONE" | string %]",
									"[% "REPEAT_ALL" | string %]" ] };
	</script>
	<script src="[% webroot %]html/status_player.js?r=[% revision %]" type = 'application/x-javascript' defer></script>
	<script src="[% webroot %]html/status.js?r=[% revision %]" type = 'application/x-javascript' defer></script>
[%- END;

-%]
<!--div style = "position: absolute; float: left; left: 0; top: 0; width: 324; z-index: 0"></div-->
<div id = "NowPlaying" style = "position: relative; left: 0; width: 320;"> <!-- left: 2 -->

	<div id= 'iNowPlayingTopbar'></div>
	
	<div style = 'position: absolute; right: 4; top: 17; width: 44; z-index: 91; -webkit-transform: translateZ(2px);'>
	[% i = 0; WHILE i < 4 %]
		<img id = 'pdote[% i %]' src = "[% webroot %]html/images/pagesdotempty.png" style="float: right[%- 
			IF (i == 1) || (i == 3); "; display: none"; END; 
			-%]" onclick="ScrollPage.prototype.doSwipe([% i %]);"/><img id = 'pdotb[% i %]' src="[% webroot %]html/images/pagesdotblue.png" style = "[%-
			IF i != 1; "display: none; "; END %]float: right"/>
	[% i = i + 1; END %]
	</div>

	<div class = 'iTopHomeDiv' style = '-webkit-transform: translateZ(2px);' onClick='returnToViewPage();'>
		<span class="blackLeft iButton" style = "color: white; padding: 6; padding-left: 0; padding-right: 4; text-align: center;"><img src = "[% webroot %]html/images/left.png"'></span>
	</div>

	<div id = 'streaminfo' style = 'display: block;'>
		[% INCLUDE song_info_display %]
	</div>
	
	<div id = 'extWrapper' class = 'coversquare' style = 'display: block; z-index: 1; overflow: scroll; -webkit-transform: translateX(-320px);'>
		<div id = 'extension'></div>
	</div>
	
	<div id = 'NPwrapperBody' class = 'coversquare' style = 'display: block; z-index: 1; left: 0; overflow: scroll; -webkit-transform: translateX(-320px);'>
		<div id = 'NPmainbody'></div>
	</div>

	<div id = 'playlistNow' class = 'coversquare' style = '-webkit-transform: translateX(320px);'> <!--  onmousewheel = 'Playlist.evtWheel(event);' onscroll = 'Playlist.evtWheel(event);' onscroll is for debugging on firefox -->
		[% INCLUDE playlist_display;
	'</div>';

	trackstat = "PLUGIN_TRACKSTAT" | getstring;
	has_trackstat = (trackstat != "PLUGIN_TRACKSTAT") -%]

	<div id = 'coverart' class = 'coversquare'>
		[% INCLUDE cover_art_display %]
		<div id = 'iNowWrapperTop' class = 'iNowOBarTop iNowWrapperClass'>
		
			<div id = 'playliststatus'>
				[% INCLUDE playlist_info_display %]
			</div>
			
			<div id = 'shuffleControl'>
			 [% INCLUDE shuffle_settings %]
			</div>
			
			<div id = 'repeatControl'>
			 [% INCLUDE repeat_settings;
			'</div>';
	
			INCLUDE progress_bar_display;
			
			IF has_trackstat; INCLUDE trackstat_info_display; END;
			
		'</div>';
	
		%]

		<div id = 'iNowWrapperBottom' class = 'iNowOBarBottom iNowWrapperClass'>[%
	
			INCLUDE volume_settings;
		
		'</div>';
	'</div>';
	
	%]	<div id = 'iNowBottombarBG' class = "iNowBottombar" 
			style = "-webkit-transform: rotateX(180deg);
					background-position: left bottom;
					background-image: none; z-index: 19">
	</div>
	<div id = 'iNowBottombar' class = "iNowBottombar">
	[%
		INCLUDE player_controls;
		INCLUDE player_name;
	'</div>';

	%]<div id = 'textOSD' class = 'iNowTextInfo' style = 'display: none; -webkit-transform: translateZ(1px)'></div>
	<div id = "PLEshadow" class = "PLShadowElement" style = "display: none"></div>[%

'</div>';
'</body>';
'</html>';

# /Page status.html

END;

BLOCK repeat_settings %]
	<div id = 'repeatcontrol_content' 
		style = "background-image: url([% webroot %]html/images/repeat.png); 
				 width: 25; height: 21; overflow: hidden;
				 background-position: left [% repeat * 21 %];"
		title ='[% SWITCH repeat;
					CASE 0; "REPEAT_OFF" | string;
					CASE 1; "REPEAT_ONE" | string;
					CASE 2; "REPEAT_ALL" | string;
				END	%]' 
		onClick = "Player.controls.evtRepeatShuffle('toggle', 'repeat');"></div>
	<div id = 'repeatcontrol_custom' 
		onClick = "Player.controls.evtRepeatShuffle('custom', 'repeat');" 
		style = 'display: none; overflow: hidden;
				 width: 32; height: 22;
				 background-repeat: no-repeat;
				 -webkit-transform: translateZ(3px);'></div>
[% END;

BLOCK shuffle_settings %]
	<div id = 'shufflecontrol_content' 
		style = "background-image: url([% webroot %]html/images/shuffle.png); 
				 width: 27; height: 21; overflow: hidden;
				 background-position: left [% shuffle * 21 %]"
		title ='[% SWITCH shuffle;
					CASE 0; "SHUFFLE_OFF" | string;
					CASE 1; "SHUFFLE_ON_SONGS" | string;
					CASE 2; "SHUFFLE_ON_ALBUMS" | string;
				END	%]' 
		onClick = "Player.controls.evtRepeatShuffle('toggle', 'shuffle');"></div>
	<div id = 'shufflecontrol_custom' 
		onClick = "Player.controls.evtRepeatShuffle('custom', 'shuffle');" 
		style = 'display: none; overflow: hidden;
				 width: 32; height: 22;
				 -webkit-transform: translateZ(3px);
				 background-repeat: no-repeat;'></div>
[% END;

BLOCK cover_art_display %]
	<img width = '320' height="320" id = 'coverartpath' onClick = 'toggleOverlays();'> <!-- src="[% webroot %]html/images/cover.png" -->
[% END;

BLOCK playlist_info_display %]
	<span id = 'thissongnum' style = 'font-weight: bold;'></span><b> [% "OUT_OF" | string %] </b><span id = 'songcount' style = 'font-weight: bold;'></span>
[% END;

BLOCK song_info_display %]
	<span id = 'artist' class = 'topbartextNow'></span><br>
	<span id = 'songtitle' class = 'topbartextNow' style = 'color: white; text-shadow: #666666 0px 1px 1px;'></span><br>
	<span id = 'album' class = 'topbartextNow'></span>
[% END;

BLOCK progress_bar_display %]

<div id = 'progressbar_overlay'> 
	<div class = "pbar" style = 'text-align: right; position: absolute; left: 0; width: 30; top: 2' nowrap id = 'elapsed'>0:00</div>
	<div class = "pbar" style = 'text-align: left; position: absolute; right: 0; width: 33; top: 2' nowrap id = 'duration'></div>
	<img src = '[% webroot %]html/images/VolumeBlueCap.png' style = 'position: absolute; left: 37; top: 5'>
	<img src = '[% webroot %]html/images/VolumeWhiteMusicFill.png' style = 'position: absolute; left: 42; top: 5; width: 156; height: 9;'>
	<img src = '[% webroot %]html/images/VolumeWhiteMusicCap.png' style = 'position: absolute; left: 196; top: 5'>
	<img id="progressBar" name="progressBar" src="[% webroot %]html/images/VolumeBlueFill.png" style = 'position: absolute; left: 40; top: 5; height: 9; width: 1; -webkit-transform-origin: 0 0;'>
	<img id = 'progressButton' name='progressButton' src = '[% webroot %]html/images/MusicVolumeKnobBig.png' style = 'position: absolute; top: -2; height: 27; width: 25; left: 30;' >
</div>
[% END;
# old: h 19 w 17 top 2 left 34  onClick = 'Player.controls.evtTime(event);

BLOCK trackstat_info_display %]

<div id = 'trackstat_display'>
	<table width = '100%'>
		[% tc = 0; WHILE tc < 5; tc = tc + 1; %]
			<td align = "center">
				<img id = 'trackstat_star[% tc %]' 
					 src = '[% webroot %]html/images/nostar.png' 
					 onClick = 'Player.controls.evtTrackStat([% tc %])'>
			</td>
		[% END %]
	</table>
</div>

[% END;

BLOCK player_controls %]
	<table border="0" cellspacing="0" cellpadding="0" width = '100%'>
		<td align = "left" width = "40">
		
		<div id = 'powerControlOn' 
			onClick='Player.controls.evtPower(0);' 
			style = 'display: [% IF myClientState.power %]block[% ELSE %]none[% END %];
			background-image: url([% webroot %]html/images/NowPlayingSprites.png);
			background-position: left 150;
			width: 40; height: 30; overflow: hidden;'
			title = '[% "ON" | string %]'></div>
		<div id = 'powerControlOff' 
			onClick='Player.controls.evtPower(1);'
			style = 'display: [% IF myClientState.power %]none[% ELSE %]block[% END %];
			background-image: url([% webroot %]html/images/NowPlayingSprites.png);
			background-position: left 180;
			width: 40; height: 30; overflow: hidden;'
			title = '[% "OFF" | string %]'></div>
		</td>

		<td align ="center"> 
		<div id = 'playercontrol_prev' 
			onclick="Player.controls.evtPrev();" 
			style = 'background-image: url([% webroot %]html/images/NowPlayingSprites.png);
			background-position: left 120;
			width: 31; height: 23; overflow: hidden;'
			title = [% 'PREVIOUS' | string | ucfirst %]></div>
		</td>

		<td align ="center">
		<div id = 'playercontrol_active_play' 
			onClick="Player.controls.evtPause();" 
			style = 'display:[% IF modepause || modestop %]none[% ELSE %]block[% END %];
			background-image: url([% webroot %]html/images/NowPlayingSprites.png);
			background-position: left 30;
			width: 30; height: 27; overflow: hidden;'
			title = [% 'PAUSE' | string | ucfirst %]></div>
		<div id = 'playercontrol_play' 
			onclick="Player.controls.evtPlay();" 
			style = 'display:[% IF modepause || modestop %]block[% ELSE %]none[% END %];
			background-image: url([% webroot %]html/images/NowPlayingSprites.png);
			background-position: left 60;
			width: 30; height: 27; overflow: hidden;'
			title = [% 'PLAY' | string | ucfirst %]></div>
		</td>
        
		<td align ="center">
		<div id = 'playercontrol_next' 
			onclick="Player.controls.evtNext();" 
			style = 'background-image: url([% webroot %]html/images/NowPlayingSprites.png);
			background-position: left 90;
			width: 31; height: 23; overflow: hidden;'
			title = [% 'NEXT' | string | ucfirst %]></div>
		</td>
		
		<td align = "right" width = 40>
		<!--a title = "Home" href = "[% webroot %]home.html?player=[% playerURI %]"-->
		<a title = "Home" href = "javascript:goHome();">
		<div style = 'background-image: url([% webroot %]html/images/NowPlayingSprites.png);
			background-position: left 210;
			width: 40; height: 30; overflow: hidden;'
			title = [% 'IPENG_BUTTON_HOME' | string | ucfirst %]></div></a>
		</td>

	</table>
		<img id = 'statusalarm' src = "[% webroot %]html/images/AlarmIndicator.png" style = 'display: none; position: absolute; float: right; right: 0; bottom: 0;'>
		<img id = 'statustimer' src = "[% webroot %]html/images/TimerIndicator5.png" style = 'display: [% IF sleeptime %]block[% ELSE %]none[% END %]; position: absolute; float: right; right: 15; bottom: 0;'>
[% END;

BLOCK player_name %]

<div id = "iNowPlayerName">
[%- USE Clients; players = Clients.get("id");
'<span id = "playerName">';
IF players.size > 1;
	FOREACH playerobj IN players;
		IF player == playerobj.id;
			IF playerobj.name;
				playerobj.name;
			ELSE;
				player;
			END;
		END;
	END;
END;
'</span>'; '</div>';

END;

BLOCK volume_settings %]
<div id = 'volumeControls'>
	[% IF isplayer %]
		<img src = '[% webroot %]html/images/VolumeBlueCap.png' style = 'position: absolute; left: 4; top: 5'>
	<img src = '[% webroot %]html/images/VolumeWhiteMusicFill.png' style = 'position: absolute; left: 9; top: 5; width: 262; height: 9;'>
	<img src = '[% webroot %]html/images/VolumeWhiteMusicCap.png' style = 'position: absolute; left: 271; top: 5'>
	<img id="volumeBar" src="[% webroot %]html/images/VolumeBlueFill.png" style = 'position: absolute; left: 9; top: 5; height: 9; width: 1; -webkit-transform-origin: 0 0;'>
	<img id = 'volumeButton' src = '[% webroot %]html/images/MusicVolumeKnobBig.png' style = 'position: absolute; top: -5; left: -5;' >
	[% ELSE;
		'<span>'; "IPENG_NO_VOLUME_CTRL" | string; '</span>';
	END;
'</div>';
END;


BLOCK playlist_display %]
<table id = 'playlisttableNow' width = '100%' cellspacing = '0' cellpadding = "0" style = "font-weight: bold; border-collapse: collapse; -webkit-transition-timing-function: cubic-bezier(0.1,1.0,0.58,1.0);"></table>
[% END %]

